<template>
<div style="background: rgb(244,244,244);">
  <div style="background:white;width: 90%;height: 90px;border-radius: 10px;margin-left: 70px;margin-top: 40px;font-size: 30px;color: rgb(0,112,192);text-align: center;line-height: 90px">
    面试安排流程
  </div>
  <div style="background: white;width: 90%;border-radius: 10px;margin-left: 70px;margin-top: 20px;">
    <div style="border-bottom:1px solid rgb(230,233,243);height: 50px;line-height: 50px;font-size: 14px">
      <span style="margin-left: 80px">面试通知信息</span>
    </div>
    <div>
      <el-form label-width="170px" :rules="bookRule" :model="formInline" ref="postForm" style="margin-top: 20px;padding-bottom:20px">
        <el-form-item>
          <el-col :span="2" >面试负责人：</el-col>
          <el-col :span="6">
            <el-input v-model="formInline.interviewPerson" readonly  style="width: 100%" @click="onSearch2">
              <template #suffix>
                <!--   vue3图标使用方式  -->
                <el-icon class="el-input__icon">
                  <component :is="Search" class="enter-sj" @click="onSearch2"></component>
                </el-icon>
              </template>
            </el-input>
          </el-col>
          <el-col :span="2" :offset="4" >应聘岗位：</el-col>
          <el-col :span="6">
            <el-input v-model="formInline.jobdemandName" readonly  style="width: 100%">
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="2" prop="arrangedate">申请面试：</el-col>
          <el-col :span="6">
            <el-date-picker
                v-model="formInline.interviewDate"
                prop="interviewDate"
                type="datetime"
                placeholder="面试日期"
                style="width: 100%"
                :disabled-date="agoDate"
            />
          </el-col>
          <el-col :span="2" :offset="4" prop="arrangetime">安排面试：</el-col>
          <el-col :span="6">
            <el-date-picker
                v-model="formInline.interviewApdate"
                prop="interviewApdate"
                type="datetime"
                placeholder="面试日期"
                style="width: 100%"
                :disabled-date="agoDate"
            />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="2" >面试形式：</el-col>
          <el-col :span="6">
            <el-input v-model="formInline.xingshi" readonly  style="width: 100%"></el-input>
          </el-col>
          <el-col :span="2" :offset="4">面试阶段：</el-col>
          <el-col :span="6">
            <el-input readonly v-model="formInline.interviewNumber" style="width: 100%">
            </el-input>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <div style="background: white;width: 90%;border-radius: 10px;margin-left: 70px;margin-top: 20px;">
    <div style="border-bottom:1px solid rgb(230,233,243);height: 50px;line-height: 50px;font-size: 14px">
      <span style="margin-left: 80px">候选人信息</span>
    </div>
    <div>
      <el-form label-width="170px" :model="formInline"  style="margin-top: 20px;padding-bottom:20px">
        <el-form-item>
          <el-col :span="2" >候选人姓名：</el-col>
          <el-col :span="6">
            <el-input v-model="formInline.interviName" readonly  style="width: 100%"></el-input>
          </el-col>
          <el-col :span="2" :offset="4" >性别：</el-col>
          <el-col :span="6">
            <el-input v-model="formInline.resumeSex" readonly  style="width: 100%">
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="2" >手机号码：</el-col>
          <el-col :span="6">
            <el-input v-model="formInline.interviPhone" readonly  style="width: 100%"></el-input>
          </el-col>
          <el-col :span="2" :offset="4" >工作经验：</el-col>
          <el-col :span="6">
            <el-input v-model="formInline.resumeWorkdate" readonly style="width: 100%">
            </el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <el-button type="primary" style="margin-left: 550px" @click="onSubmit(postForm)">提交</el-button>
    </div>
    <el-dialog v-model="z.faromater2">
      <!--    <div>-->
      <!--      <el-input style="width:200px;margin-left: 450px" /><el-button>搜索</el-button>-->
      <!--    </div>-->
      <div>
        <el-table :data="z.table2Data" height="250" style="width: 100%" @row-click="rowClick2">
          <el-table-column  align='center' prop="recordName" label="员工姓名" width="180" />
        </el-table>
      </div>
      <div>
        <el-button @click="z.faromater2=false" style="margin-left: 650px">取消</el-button>
      </div>
    </el-dialog>
  </div>
</div>
</template>

<script lang="ts" setup>
import {reactive, onBeforeMount, ref, computed} from 'vue'
import axios from "axios";
import {useRouter} from "vue-router";
import {ElMessage, FormInstance, FormRules} from "element-plus";
import router from "../../router";
import { Search } from '@element-plus/icons-vue'
const formInline = reactive({
  interviewPerson: '',
  jobdemandName: '',
  interviewDate:'',
  interviewApdate:'',
  xingshi:'现场面试',
  interviewNumber:1,
  interviewState:0,
  interviewResul:3,
  interviName:'',
  resumeSex:'',
  interviPhone:'',
  resumeWorkdate:'',
})
const d = () => {
  //初始数据
  formdate:[]
}
const z = reactive({
  faromater2:false,
//查询到的面试负责人信息
  table2Data:[],
})
//查询面试负责人
const onSearch2 = () => {
  z.faromater2=true
  axios.get("http://localhost:1688/recordDubbo/publicRecordDubbo").then((res)=>{
    z.table2Data=res.data.data
    console.log(z.table2Data)
  })
}
//将面试负责人加入表单
const rowClick2 = (val) => {
  formInline.interviewPerson=val.recordName;
  z. faromater2=false;
  console.log(formInline.interviewPerson)
}
let route=useRouter()
const getDate =()=>{
  let phone=route.currentRoute.value.query
  console.log(phone)
  axios.post("http://localhost:1688/resume/selectPhone/"+phone.id).then((res)=>{
    d.formdate=res.data.data
    updaDate()
  })
}
const updaDate = () => {
  formInline.interviName=d.formdate[0].resumeName;
  formInline.resumeSex=d.formdate[0].resumeSex;
  formInline.jobdemandName=d.formdate[0].resumeJob;
  formInline.interviPhone=d.formdate[0].resumePhone;
  formInline.resumeWorkdate=d.formdate[0].resumeWorkdate
}
//定义表单组件
const postForm = ref<FormInstance>();
//表单校验
const bookRule = reactive<FormRules>({
  interviewDate:[
    {required:true,message:'请输入申请日期',trigger:['blur','change']},
  ],
  interviewApdate:[
    {required:true,message:'请输入安排日期',trigger:['blur','change']},
  ]
})

// return time.getTime() < Date.now() - 8.64e7;这个是禁止今天以前日期不可选择
// return time.getTime() > Date.now()这个是禁止今天以后不可选择
//  return time.getTime() > Date.now() || time.getTime() < Date.now() - 8.64e7;两个加一起就是只能选择今天 默认今天

//不给予选择今天前的日期
const agoDate = (time: Date) => {
  return time.getTime() < Date.now() - 8.64e7;
}
const onSubmit = async (formEl: FormInstance | undefined)=>{
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {//校验通过
        axios.post("http://localhost:1688/Interviews/addintercview",formInline)
            .then((res)=>{
              router.push({path: '/talent'})
              ElMessage({
                message: '申请成功',
                type: 'success',
              })

            })
      console.log(formInline)
    } else {
      ElMessage.error('error submit!');
    }
  })
}
onBeforeMount(function () {
  getDate()
})
</script>

<style scoped>

</style>